<template >
    <div class="box">
        <div class="null-page" v-show="yes"></div>

        <el-card class="box-card member-coupon">
            <div slot="header" class="clearfix">我的竞价详情</div>
            <div class="member-body">
                <div class="audit-success" v-if="enter_status == 0">
                    <div>
                        竞标状态:<span style="color:red;margin-left:10px;">审核中</span>
                    </div>
                    <div>
                        您提交的竞标信息正在审核中，请你耐性等待！
                    </div>
                </div>
                <div class="audit-ing" v-if="enter_status == 1">
                    <div>
                        竞标状态: <span style="color:green;">审核通过</span>
                    </div>
                    <div>
                        您提交的竞标信息已经通过
                    </div>
                </div>
                <div class="audit-fail" v-if="enter_status == 2">
                    <div>
                        竞标状态:<span style="color:red;">审核失败</span>
                    </div>
                    <div>
                        您提交的竞标信息通过失败
                    </div>
                </div>
            </div>
            <div class="my-account">
                <div class="my-account-li">
                    <ul class="my-account-li-num">
                        <li>商品信息</li>
                        <li>单价</li>
                        <li>截止时间</li>
                    </ul>
                    <ol class="my-account-li-ol">
                        <li>
                            <img :src="$util.img(bidding_info.sku_image)" alt="" />
                        </li>
                        <li>
                            <span>{{ bidding_info.pintuan_name }}</span>
                            <!-- <p v-for="(item, index) in sku_spec_format" :key="index">{{ item.spec_name }}:{{ item.spec_value_name }}</p> -->
                        </li>
                        <li>
                            <span>￥{{ bidding_info.price }}</span>
                        </li>
                        <li>
                            <span>{{ $util.timeStampTurnTime(bidding_info.bidding_end_time) }} </span>
                        </li>
                    </ol>
                </div>

                <h4 class="my-account-h4">竞标等级</h4>

                <template class="my-account-template" tooltip-effect="dark" @selection-change="handleDetailSelectionChange">
                    <el-table stripe :data="bidding_level_rule" style="width: 100%" :row-class-name="rowClassName">
                        <el-table-column width="50" align="center">
                            <template slot-scope="scope">
                                <el-checkbox disabled :checked="selected_number == scope.$index ? true : false"></el-checkbox>
                            </template>
                        </el-table-column>

                        <el-table-column label="竞标等级" prop="xh" align="center"></el-table-column>
                        <el-table-column prop="bidding_num" label="数量(件)" align="center"> </el-table-column>
                        <el-table-column prop="cost_price" label="成本(元)" align="center"> </el-table-column>
                        <el-table-column prop="pintuan_price" label="售价(元)" align="center"> </el-table-column>
                        <el-table-column prop="pintuan_num" label="成团人数" align="center"> </el-table-column>
                    </el-table>
                </template>

                <template>
                    <div class="jiesuan">
                        <p>预期获利：{{ earn_profit }}元</p>
                        <span>竞标金额：{{ total_sum }}元</span><br />
                    </div>
                </template>
            </div>
        </el-card>

        <el-dialog title="使用余额" :visible.sync="dialogpay" width="350px">
            <el-form status-icon ref="ruleForm" label-width="100px">
                <el-form-item label="支付密码" class="pay-password-item">
                    <!--添加一个不可见的input,欺骗浏览器自动填充-->
                    <el-input type="password" class="pay-password" :maxlength="6" v-model="password" @input="input"></el-input>
                </el-form-item>
                <p class="ns-text-color forget-password" @click="setPayPassword">忘记密码</p>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { biddingdetail, enterDetail } from "@/api/member/bidding"

export default {
    data() {
        return {
            bidding_info: " ",
            yes: true,
            sku_spec_format: " ",
            bidding_level_rule: [],
            total_sum: 0,
            earn_profit: 0,
            dialogpay: false,
            password: "",
            selected_index: -1,
            selected_number:-1,
            enter_id: 0,
            level_rules: {},
            enter_status: -1,
        }
    },
    created() {
        this.enter_id = this.$route.query.enter_id;
        this.getEnterDetail()
    },
    mounted() {
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },

    methods: {
        rowClassName({ row, rowIndex }) {
            row.xh = rowIndex + 1
        },
        getEnterDetail() {
            enterDetail({ enter_id: this.enter_id })
                .then((res) => {
                    if(res.code == 0) {
                        this.bidding_info = res.data.bidding_info
                        this.bidding_level_rule =res.data.bidding_info.bidding_level_rule
                        this.selected_index = res.data.enter_info.bidding_level;
                        this.selected_number = this.selected_index;
                        this.total_sum = res.data.enter_info.bidding_money;
                        var earn_money = this.bidding_level_rule[this.selected_index];
                        this.earn_profit = ((earn_money.pintuan_price - earn_money.cost_price) * earn_money.bidding_num).toFixed(2);
                        this.enter_status = res.data.enter_info.enter_status;
                    }
                })
        },
        setPayPassword() {
            this.$router.pushToTab("/member/security")
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: relative;
}
.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.my-account-li-num {
    height: 30px;
    width: 939px;
    background: #f7f7f7;

    border: 1px solid #eeeeee;

    text-align: left;
    li {
        float: left;
        &:nth-child(1) {
            width: 60%;

            margin: 5px 0 0 28px;
        }
        &:nth-child(2) {
            width: 20%;
            margin: 5px 0 0 0;
        }
        &:nth-child(3) {
            margin: 5px 0 0 0;
        }
    }
}
.my-account-li-ol {
    height: 134px;
    width: 939px;

    border: 1px solid #eeeeee;

    li {
        float: left;
        &:nth-child(1) {
            width: 15.5%;
            img {
                width: 89px;
                height: 89px;

                margin: 24px 0 0 28px;
            }
        }
        &:nth-child(2) {
            width: 37%;
            span {
                width: 240px;
                display: inline-block;
                line-height: 15px;
                margin-top: 24px;
            }
            p {
                margin-top: 20px;
                color: #cccccc;
            }
        }
        &:nth-child(3) {
            width: 28%;
            span {
                display: inline-block;
                margin: 24px 0 0 95px;

                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ff5f8a;
            }
        }
        &:nth-child(4) {
            span {
                display: inline-block;
                margin: 24px 0 0 30px;
                font-size: 15px;
                color: #ff5f8a;
                width: 84px;
            }
        }
    }
}

.member-body {
    background-color:#FFDFE8;
    padding: 10px 10px;
}
.my-account-h4 {
    height: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #303133;
    line-height: 36px;

    margin: 30px 0 0 0;
}
.el-table {
    margin: 50px 0 0 0;
}

.jiesuan {
    height: 300px;
    position: relative;
    span {
        position: absolute;
        right: 0;
        top: 50px;
        color: red;

        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ff5f8a;
    }

    p {
        position: absolute;
        right: 0;
        top: 90px;

        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ff5f8a;
    }
    button {
        position: absolute;
        right: 0;
        top: 150px;
        width: 114px;
        height: 40px;
        background: #ff5f8a;
        border: 0px solid #2b2f30;
        border-radius: 3px;
        color: #ffffff;
    }
}
</style>
<style lang="less"  scoped>
.my-account-template /deep/ .el-table tr {
    background-color: transparent !important;
}
</style>>
    
